<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>分类管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/static/css/global.css">
    <link rel="stylesheet" href="/static/css/user.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="breadcrumb" style="margin: 20px">
    <span class="layui-breadcrumb">
        <a href="/admin">首页</a>
        <a><cite>文章编辑</cite></a>
    </span>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>

<form class="layui-form" action="" method="post" lay-filter="editForm" id="editForm"
      style="display: none;margin-top: 50px;">
    <div class="layui-form-item">
        <label class="layui-form-label" for="id">id</label>
        <div class="layui-input-block">
            <input type="text" name="id" autocomplete="off" class="layui-input layui-bg-gray layui-font-gray" disabled
                   id="id">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类别</label>
        <div class="layui-input-block">
            <input type="text" name="title" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="edit-submit">
                <i class="layui-icon layui-icon-release"></i>
                &nbsp;提交
            </button>
            <button type="reset" class="layui-btn layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                &nbsp;重置
            </button>
        </div>
    </div>
</form>

<script src="/static/layui/layui.js"></script>
<script src="/static/pear/component/pear/pear.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use('table', function() {
            var table = layui.table;
            var $ = layui.$;
            var form = layui.form;

            table.render({
                    elem: '#test'
                    , url: '/api/v1/admin/category/'
                    , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        , curr: 5, //设定初始在第 5 页
                    },
                    cols: [
                        [
                            {field: 'id', title: 'ID', width: 80}
                            , {field: 'name', title: '类别'}
                            , {
                            title: '操作管理',
                            width: 150,
                            templet: (d) => `<button type="button" class="layui-btn layui-btn-xs "><a style="color: white" href="JavaScript:;" lay-event="tool-edit" >编辑</a></button>`,
                        },
                        ]],
                },
            );
            //  监听工具条
            table.on('tool(test)', function(obj) {
                // 注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; // 获得当前行数据
                var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

                if (layEvent === 'tool-edit') {
                    // 编辑修改数据
                    window.openUpdateUser(obj.data);
                }
            });
            //  打开修改页面，并把数据发送到后端
            window.openUpdateUser = function(data) {
                console.log(data);
                layer.open({
                    type: 1,
                    title: '修改类别',
                    content: $('#editForm'), // 从当前页面获取表单进行修改
                    area: ['800px', '400px'],
                    success: function() {
                        form.val('editForm', data);
                    },
                });
            };

            form.on('submit(edit-submit)', function(obj) {
                window.edit_student(obj);
            });

            window.edit_student = function(obj) {
                $.ajax({
                    url: '/admin/article/types/' + obj.field['id'],
                    type: 'PUT',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify(obj.field),
                    success: function(res) {
                        if (res.code === 1) {
                            layer.msg('修改成功', {icon: 6});
                            layer.closeAll();
                            setTimeout(function() {
                                table.reload('test');
                            }, 1000);
                        }
                    },
                });

            };
        },
    )
    ;
</script>

</body>
</html>
